/**
 * Created by tiansha on 2016/5/1.
 */

import 'jquery';
import 'font-awesome/css/font-awesome.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

export class TestApp extends Component {

  render() {
    return (
      <div id="side-menu">
        <div className="profile-block">
          <img src={require("jon.png")} className="img-circle" />
          <h4 className="profile-title">Jonny Doo <small>@jonnydoo</small></h4>
        </div>

        <ul className="nav nav-pills nav-stacked">
          <li>
            <a href="#" className="transition">
              <span className="glyphicon glyphicon-home" aria-hidden="true"></span>
              Overview
            </a>
          </li>
          <li>
            <a href="#" className="transition">
              <span className="glyphicon glyphicon-user" aria-hidden="true"></span>
              Audience
            </a>
          </li>
          <li>
            <a href="#finances-opts" className="transition" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="finances-opts">
              <span className="glyphicon glyphicon-usd" aria-hidden="true"></span>
              Finances
              <span className="glyphicon glyphicon-menu-left pull-right transition" aria-hidden="true"></span>
            </a>
            <ul className="collapse list-unstyled" id="finances-opts">
              <li>
                <a href="#" className="transition">
                  Incomes
                </a>
              </li>
              <li>
                <a href="#" className="transition">
                  Outcomes
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" className="transition">
              <span className="glyphicon glyphicon-time" aria-hidden="true"></span>
              Real time
              <span className="badge pull-right">12</span>
            </a>
          </li>
          <li className="nav-divider"></li>
          <li>
            <a href="#projects-opts" className="transition" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="projects-opts">
              <span className="glyphicon glyphicon-briefcase" aria-hidden="true"></span>
              Projects
              <span className="glyphicon glyphicon-menu-left pull-right transition" aria-hidden="true"></span>
            </a>
            <ul className="collapse list-unstyled" id="projects-opts">
              <li>
                <a href="#" className="transition">
                  Free ration nation
                </a>
              </li>
              <li>
                <a href="#" className="transition">
                  Cats going crazy
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    );
  }
}
